<template>
  <div class="customerService">
    <x-header title="客服与帮助" :left-options="{backText:''}" class="whiteHeader"></x-header>
    <!-- 客服服务窗口 -->
    <div class="serviceWindow">
      <div class="serviceWindowTop">
        <div class="servicePhone" @click="toCellShow">
          <img src="../../assets/image/customer/phoneserver.png" alt="">
          <P>电话客服</P>
        </div>
        <div class="tabLine"></div>
        <div class="serviceOnline" @click="toOnline">
          <img src="../../assets/image/customer/onlineserver.png" alt="">
          <P>在线客服</P>
        </div>
      </div>
      <div class="serviceTitle">
        <p>客服服务时间为周一到周五 9:00-18:00</p>
      </div>
    </div>
    <div class="cutpBlank"></div>
    <!-- 帮助中心 -->
    <div class="helpCenter">
      <div class="helpCenterTop">
        <div class="helpCenterTitle">
          <img src="../../assets/image/customer/helpline.png" alt="">
          <p>帮助中心</p>
        </div>
        <div class="helpCenterBanner">
          <div class="helpLists">
            <div class="helpList" v-for="(item,index) in helpList" :key="index" :class="{red:item.TYPE_ID==typeId}" @click="changeTYPE(item.TYPE_ID,index)">
              <p>{{item.TYPE_NAME}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="helpCenterMain">
        <div class="helpContent">
          <group v-for="(item,index) in MessageByTypeList" :key="index">
            <cell class="helpContentList" :title="item.MESS_TITLE" :border-intent="false" is-link  :arrow-direction="item.showbol ? 'up' : 'down'"
            @click.native="toshowhelplist(item,index)"></cell>
            <template >
              <div class="sub-item" v-if="item.showbol">
                <div></div>
                <p>{{item.MESS_COUNT}}</p>
              </div>
            </template>
          </group >
        </div>
      </div>
    </div>
    <div class="cutpBlank"></div>
    <!-- 意见反馈 -->
    <div class="Suggestion" @click="tosuggest">
      <cell title="意见反馈" is-link>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../../assets/image/customer/feedbackicon.png">
        <p>吐槽,能让你用的更爽</p>
      </cell>
    </div>
    <!-- 电话客服 -->
    <confirm v-model="show2" title="是否拨打车网通客服热线" theme="android" class="CellShowCon" @on-confirm="onConfirm">
      <!--  @on-cancel="onCancel" @on-confirm="onConfirm" @on-show="onShow" @on-hide="onHide" -->
        <p style="text-align:center;">4008829916</p>
      </confirm>
  </div>
</template>
<script>
/*砍价详情*/
import { XHeader, Tab, TabItem,Cell, CellBox,Group,Confirm} from "vux";
import { setCookie, getCookie, reloads, appid, clearCookie } from "../../util/commonUtils";
export default {
  name: 'customerService',
  // 数据
  data() {
    return{
      showContent001: false,
      show2: false,
      telephone: 4008829916, // 电话
      userid: '', // 用户的id
      userphone: '', // 用户的手机号
      helpList:'', // 客服与帮助中心类型列表数据
      MessageByTypeList: '', // 获取消息类型的消息列表
      typeId: 1, // 获取消息类型的消息列表 默认id
      activeindex: ''
    }
  },
  // 计算属性
  computed: {
  },
  // 创建（实例创建完成）
  created(){
    this.getHelpMessage()
    this.getgetMessageByType()
  },
  // 方法（实例中的方法）
  methods: {
    // 客服电话弹窗
    toCellShow(){
      this.show2 = true;
    },
    // 电话客服
    onConfirm(){
       window.location.href = `tel:${this.telephone}`
      //  console.log('plugin confirm')
    },
    // 在线客服
    toOnline(){
      // 获取登录的手机号
      if(getCookie('loginkey')){
        this.userid = getCookie('loginkey')
        this.userphone = getCookie('TEL')
      }
      // console.log(userid, phone)
      this.$fetchPost('/HelpMessageType/helloToClientService', {
        USER_ID: userid,
        PHONE: phone
      }).then(res=>{
        console.log(res)
      })
    },
    //  帮助列表
    toshowhelplist(item, index){
      this.MessageByTypeList[index].showbol=!this.MessageByTypeList[index].showbol
      this.MessageByTypeList = this.MessageByTypeList.concat()
      // console.log(this.MessageByTypeList)
    },
    // 改变changeTYPE
    changeTYPE(id,index){
      this.typeId = id
      this.getgetMessageByType()
    },
    // 获取客服与帮助中心类型列表 客服与帮助中心类型列表
    getHelpMessage(){
      this.$fetchPost('/HelpMessageType/getHelpTypeList').then(res=>{
        if(res.STATUS_CODE==1){
          this.helpList = res.RESULT_DATA
        }
      },
      err=>console.log(err)
      )
    },
    // 获取消息类型的消息列表
    getgetMessageByType(){
      this.$fetchPost('/HelpMessageType/getMessageByTypeList', {
        TYPE_ID: this.typeId
      }).then(res=>{
        if(res.STATUS_CODE==1){
          this.MessageByTypeList = res.RESULT_DATA
          if(this.MessageByTypeList.length!=0){
            for(let i = 0; i< this.MessageByTypeList.length; i++){
              this.MessageByTypeList[i].showbol = false
            }
          }
          // console.log(this.MessageByTypeList)
        }
      },
      err=>console.log(err)
      )
    },
    tosuggest(){
      this.$router.push('/suggest')
    }
  },
  // 子组件
  components: {
    XHeader,
    Tab,
    TabItem,
    Cell,
    CellBox,
    Group,
    Confirm
  }
}
</script>
<style lang="less">
@import url("../../assets/css/public.less");
.vux-cell-primary {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: left;
}
.customerService{
  min-height: 100%;
  background: #f2f2f2;
  padding-bottom: 0.4rem;
  .cutpBlank {
    height: 0.2rem;
    background: #f5f5f5;
  }
  .serviceWindow{
    height: 2.18rem;
    font-size: 0.24rem;
    background: #fff;
    .serviceWindowTop{
      position: relative;
      display: flex;
      flex-wrap:wrap;
      .servicePhone{
        padding: 0.28rem 1.38rem 0.18rem 1.35rem;
        img{
          width: 0.98rem;
          height: 0.98rem;
        }
        p{
        }
      }
      .tabLine {
        &:after {
          content: "";
          width: 1px;
          height: 1rem;
          background: #e6e6e6;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .serviceOnline{
        padding: 0.28rem 1.38rem 0.18rem 1.35rem;
        img{
          width: 0.98rem;
          height: 0.98rem;
        }
      }
    }
    .serviceTitle{
      padding-bottom: 0.1rem;
        p{
          font-size: 0.18rem;
          color: #999;
        }
      }
  }
  .helpCenter{
    font-size: 0.28rem;
    background: #fff;
    .helpCenterTop{
      height: 1.82rem;
      .helpCenterTitle{
        display: flex;
        padding: 0.2rem 0 0.2rem 0.3rem;
        img{
          height: 0.4rem;
          padding-right: 0.14rem;
        }
        p{
          font-size: 0.3rem;
          color: #333;
          font-weight: 300;
        }
      }
      .helpCenterBanner{
        // overflow: scroll;
        height: 1rem;
        .helpLists{
          display: flex;
          padding: 0 0.15rem;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          flex-flow: row nowrap;
          overflow: scroll;
          height: 100%;
          .helpList{
            align-self: center;	
            .borderFu(#999999,0.56rem);	
            margin: 0 0.15rem;											
            p {							
              text-align:center;					
              height: 0.56rem;
              line-height:0.4rem;		
              padding:0.1rem 0.2rem;
              box-sizing: border-box;
              border-radius: 0.28rem;
              font-size: 0.26rem;
              color: #333;					
              background: #fff;	
              z-index: 99;
              white-space: nowrap;					
            }
          }
          .red {
            p{
              color: #EC2121;
                opacity: 0.75;
            }
            .borderFu(#ec2121,0.56rem);
          }
        }
      }
    }
    .helpCenterMain{
      font-size: 0.28rem;
      color: #404040;
      .helpContent{
        font-size: 0.28rem;
        color: #404040;
        display: flex;
        flex-direction: column ;
        .helpContentList{
          height: 1rem;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          .vux-cell-bd{
            .vux-label{
              font-size: 0.28rem!important;
            }
          }
        }
        .sub-item{
          font-size: 0.24rem;
          color: #969696;
          text-align: left;
          word-wrap: break-word;
          word-break: normal;
          display: flex;
          flex-direction:row;
          padding-bottom: 0.15rem;
          div{
            // display: inline-block;
            background-color:#979797;
            margin-top:0.05rem;
            width: 0.1rem;
            height: 0.1rem;
            padding: 0.08rem;
          }
          p{
            padding-left: 0.1rem;
          }
        }
      }
    }
  }
  .Suggestion{
    height: 1rem;
    background: #fff;
    font-size: 0.28rem;
    .weui-cell{
      height: 1rem;
      padding: 0.05rem 0.25rem!important;
      .weui-cell__hd{
        padding-left: 0.1rem;
      }
      .vux-cell-bd>p{
        .vux-label{
          flex:0;
        }
      }
      .weui-cell__ft{
        flex:1;
        padding-right: 0.2rem;
        text-align: left;
      }
    }
  }
}
.CellShowCon{
  font-size: 0.32rem;
  color: #000;
  .weui-dialog__hd{
    display: flex;
    align-items: center;
    text-align: left;
    .weui-dialog__title{
      font-size: 0.34rem;
      font-weight: 100;
      text-align: center;
    }
  }
  .weui-dialog__bd{
    p{
      color:#000;
      font-size: 0.28rem;
      text-align: left!important;
    }
  }
}
.weui-dialog__btn_primary{
  color: #ff0000!important;
  background: #fff!important; 
}
</style>
